<template>
    <view class="uni-product-list">
        <view class="uni-product" v-for="(product,index) in productList" :key="index" :id="product.id" @tap="toDetail">
            <view class="image-view">
                <image v-if="renderImage" class="uni-product-image" :src="product.image"></image>
            </view>
            <view class="uni-product-title">{{product.title}}</view>
            <view class="uni-product-price">
                <text class="uni-product-price-favour">￥{{product.originalPrice}}</text>
                <text class="uni-product-price-original">￥{{product.favourPrice}}</text>
                <!-- <text class="uni-product-tip">{{product.tip}}</text> -->
            </view>
        </view>
    </view>
</template>

<script>
	
	import { goodList } from '@/api/goods.js'
	//import '@/mock/goods.js'
	
    export default {
        data() {
            return {
                title: 'product-list',
                productList: [],
                renderImage: false
            };
        },
        methods: {
			toDetail(e){
				uni.navigateTo({
					url: "./detail?goods_id=" + e
				})
			},
			
            loadData(action = 'add') {
                goodList().then(res => {
					if(res.statusCode === 1) {
						this.productList = res.result
					}
				}).catch(err => {
					console.log(err)
				})
            }
        },
        onLoad() {
            this.loadData();
            setTimeout(() => {
                this.renderImage = true;
            }, 300);
        }
    };
</script>

<style>
    /* product */
    page {
        background: #F8F8F8;
    }

    view {
        font-size: 28upx;
    }

    .uni-product-list {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .uni-product {
        padding: 20upx;
        display: flex;
        flex-direction: column;
    }

    .image-view {
        height: 330upx;
        width: 330upx;
        margin: 12upx 0;
    }

    .uni-product-image {
        height: 330upx;
        width: 330upx;
    }

    .uni-product-title {
        width: 300upx;
        word-break: break-all;
        display: -webkit-box;
		text-align:justify;
        overflow: hidden;
        line-height: 1.5;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
		padding: 0 15upx;
    }

    .uni-product-price {
        margin-top: 10upx;
        font-size: 28upx;
        line-height: 1.5;
        position: relative;
    }

    .uni-product-price-original {
        color: #f00;
    }

    .uni-product-price-favour {
        color: #888888;
        text-decoration: line-through;
        margin-left: 10upx;
    }

    .uni-product-tip {
        position: absolute;
        right: 10upx;
        background-color: #ff3333;
        color: #ffffff;
        padding: 0 10upx;
        border-radius: 5upx;
    }
</style>
